<template>
	<div class="system-iotDeviceGroup-add">
		<!--  -->
		<el-dialog v-model="isShowDialog" width="500px" :close-on-click-modal="false" :destroy-on-close="true">
			<template #header>
				<div>修改库存配置</div>
			</template>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
				<el-form-item label="市级名称">
					<el-input v-model="formData.name" :disabled="true" />
				</el-form-item>

				<el-form-item label="月租价" prop="monthlyRent">
					<el-input v-model="formData.monthlyRent" placeholder="请输入月租价" />
				</el-form-item>
				<el-form-item label="话费/分钟" prop="price">
					<el-input v-model="formData.price" placeholder="请输入话费/分钟" />
				</el-form-item>
				<el-form-item label="库存状态" prop="inventory">
					<el-select v-model="formData.inventory" clearable placeholder="请选择库存状态">
						<el-option v-for="item in dictionary.inventoryList" :label="item.label" :value="item.value"
							:key="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select v-model="formData.status" clearable placeholder="请选择状态">
						<el-option v-for="item in dictionary.statusList3" :label="item.label" :value="item.value"
							:key="item.value" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="loading">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import dictionary from '@/utils/dictionary.json'
import { editCityDataApi } from '@/api/numberManage/inventoryConfiguration'
export default defineComponent({
	name: 'proceedsAccountSetAdd', //收款账户设置
	components: {},
	// props: {},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			formData: {
				name: undefined,
				id: undefined,
				monthlyRent: undefined,
				price: undefined,
				inventory: undefined,
				status: undefined,	//状态
			},
			// 表单校验
			rules: {
				accountName: [{ required: true, message: '收款户名不能为空', trigger: 'blur' }],
				bankName: [{ required: true, message: '收款银行不能为空', trigger: 'blur' }],
				accountNumber: [{ required: true, message: '收款银行账号不能为空', trigger: 'blur' }],
				states: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
			},
		});
		// 打开弹窗
		const openDialog = (row) => {
			resetForm();
			state.formData = JSON.parse(JSON.stringify(row))
			console.log(state.formData);

			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 提交
		const onSubmit = () => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					state.loading = true;
					const { id, monthlyRent, price, inventory, status } = state.formData
					let obj = {
						id,
						monthlyRent,
						price,
						inventory,
						status,	//状态
					}

					//添加
					editCityDataApi(obj)
						.then(() => {
							ElMessage.success('修改成功');
							closeDialog(); // 关闭弹窗
							emit('getList');
						})
						.finally(() => {
							state.loading = false;
						});
				}
			});
		};
		const resetForm = () => {
			state.formData = {
				name: undefined,
				id: undefined,
				monthlyRent: undefined,
				price: undefined,
				inventory: undefined,
				status: undefined,	//状态
			};
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			resetForm,
			menuRef,
			formRef,
			dictionary,
			...toRefs(state),
		};
	},
});
</script>
<style scoped></style>
